<template>
  <div class="box">
    <header class="header">
      <van-nav-bar title="购物车" left-arrow @click-left="$router.back()" />
    </header>
    <div class="content">
      <van-swipe-cell v-for="item in store.cartList">
        <van-card
          style="margin-bottom:5px"
          :num="item.count"
          :price="item.price"
          :title="item.title"
          class="goods-card"
          :thumb="item.image"
        >
          <template #tag>
            <van-checkbox v-model="item.checked"></van-checkbox>
          </template>
          <template #footer>
            <van-stepper v-model="item.count" />
          </template>
        </van-card>
        <template #right>
          <van-button
            square
            text="删除"
            type="danger"
            class="delete-button"
            @click="store.deleteItem(item.id)"
          />
        </template>
      </van-swipe-cell>
    </div>
    <footer>
      <van-submit-bar :price="3050" button-text="去结算" @click="$router.push('/order')">
        <van-checkbox v-model="allChecked">全选</van-checkbox>
      </van-submit-bar>
    </footer>
  </div>
</template>
<script setup>
import { useCounterStore } from "@/stores/counter";
const store = useCounterStore();
const allChecked=({
    get(){
       if(store.cartList.length==0)
       {
        return false
       }
       else
       {
        return store.cartList.every(item=>item.checked)
       }
    },
    set(newValue){
        store.cartList.value(item=>item.checked=newValue)
    }
})
</script>
<style lang='scss'>
.goods-card {
  margin: 0;
  background-color: white;
}
.delete-button {
  height: 100%;
}
</style>